<template>
    <div class="item" :style="style" v-if="data.noPhoto">
        <div class="noPhoto">
            <div class="upPhotoBox">
                <div v-if="!uploadImg">
                    <span class="ico_add_photo"></span>
                    <p>Upload a photo to get started!</p>
                </div>
                <input type="file" accept="image/*" @change="uploadPhoto">
                <div v-if="uploadImg" class="img" :style="imgStyleObject(uploadImg)"></div>
            </div>
            <div class="note">
                Note: Lewd, offensive, nude, copyrighted, child alone, racist and other photos prohibited by law or our Service Agreement are not allowed.
            </div>
        </div>
    </div>
    <div class="item" :style="style" v-else>
        <div class="ico_meet_pass" ref="dislike"></div>
        <div class="ico_meet_like" ref="like"></div>
        <div class="photo" @click="openDialogSlider">
            <lazyImg :src="data.icon " :replace="data.picture "></lazyImg>
            <!--<div class="photoNum ">{{data.photoNumber}}</div>-->
            <!-- <div class="likeYou "><span></span>They like you!</div> -->
        </div>
        <div class="info ">
            <div class="username ">{{data.username}}</div>
            <div class="dec "> {{data.baseInfo}}</div>
            <div class="labelbox ">
                <span v-if="data.body && data.body!==language.unify_pleaseAskMe " class="label ">{{data.body}}</span>
                <span v-if="data.disability " class="label ">{{data.disability}}</span>
                <!-- <span class="label ">Gonorrhea</span> -->
                <span v-if="(data.body && data.body!==language.unify_pleaseAskMe) || data.disability " class="more "></span>
            </div>
        </div>
    </div>
</template>
<script>
import globalMixin from '../common/globalMixin'
import lazyImg from './LazyImg'
export default {

    name: 'letsMeetItem',
    props: ['data', 'propsIndex', 'init', 'showDialogSlider'],
    components: {
        lazyImg
    },

    mixins: [globalMixin],

    data() {
        return {
            touchData: {},
            style1: '',
            style2: '',
            uploadImg: '',
        }
    },

    computed: {
        style() {
            return this.style1 + this.style2;
        }
    },

    created() {
        let tthis = this,
            time = this.getTime();
        if (this.init) {
            tthis.style1 = '-webkit-transform: translate(400px, 0px) rotate(10deg);';
            setTimeout(function() {
                tthis.style1 = '-webkit-transform: translate(0px, 0px) rotate(0deg); -webkit-transition: 400ms ease-out;';
                tthis.style2 = 'opacity:1;';
                setTimeout(function() {
                    tthis.style1 = '';
                }, 400)
            }, time);
        } else {
            tthis.style2 = 'opacity:1;';
        }
    },

    activated() {
        this.uploadImg = '';
    },

    mounted() {
        let tthis = this;
        this.$el.addEventListener('touchstart', e => {
            tthis.touchData.x1 = e.touches[0].pageX;
            tthis.touchData.y1 = e.touches[0].pageY;
            tthis.touchData.x2 = e.touches[0].pageX;
            tthis.touchData.y2 = e.touches[0].pageY;
        });
        this.$el.addEventListener('touchmove', e => {
            e.preventDefault();
            e.stopPropagation();
            tthis.touchData.x2 = e.touches[0].pageX;
            tthis.touchData.y2 = e.touches[0].pageY;
            tthis.move();
        });
        this.$el.addEventListener('touchend', e => {
            tthis.touchEnd();
        });
    },

    methods: {

        imgStyleObject(uploadImg) {
            return 'background-image:url(' + uploadImg + ')';
        },

        getTime() {
            let time, num = 200;
            return time = parseInt(this.propsIndex + 1) * num;
        },

        move() {
            let x = this.touchData.x2 - this.touchData.x1,
                y = this.touchData.y2 - this.touchData.y1,
                direction = x > 0 ? 'right' : 'left';
            this.setCss(x, y, 0, direction);
        },

        touchEnd() {
            if (this.data.noPhoto) {
                this.setCss(0, 0, 300);
                return;
            }
            let x = this.touchData.x2 - this.touchData.x1,
                y = this.touchData.y2 - this.touchData.y1;

            if (Math.abs(x) < 80) {
                this.setCss(0, 0, 300);
            } else {
                this.setCss(0, 0, 0);
                this.$emit('letsMeetCallback', x > 0 ? 'y' : 'n')
            }
        },

        setCss(x, y, time, direction = '') {
            let style, opaVal = Math.abs(x / 80);
            if (direction == 'left') {
                style = '-webkit-transform: translate(' + x + 'px,' + y + 'px) rotate(-9deg) translateZ(0); -webkit-transition: ' + time + 'ms linear;-moz-transform: translate(' + x + 'px,' + y + 'px) rotate(-9deg);-moz-transition: ' + time + 'ms linear;';
                if (!this.data.noPhoto) {
                    this.$refs.dislike.style.opacity = opaVal;
                    this.$parent.$refs.dislike.className = 'meet_pass meet_passon';
                    this.$parent.$refs.like.className = 'meet_like';
                }
            } else if (direction == 'right') {
                style = '-webkit-transform: translate(' + x + 'px,' + y + 'px) rotate(9deg) translateZ(0); -webkit-transition: ' + time + 'ms linear;-moz-transform: translate(' + x + 'px,' + y + 'px) rotate(9deg);-moz-transition: ' + time + 'ms linear;';
                if (!this.data.noPhoto) {
                    this.$refs.like.style.opacity = opaVal;
                    this.$parent.$refs.like.className = 'meet_like meet_likeon';
                    this.$parent.$refs.dislike.className = 'meet_pass';
                }
            } else {
                style = '-webkit-transform: translate(' + x + 'px,' + y + 'px);-webkit-transition: ' + time + 'ms linear;-moz-transform: translate(' + x + 'px,' + y + 'px);-moz-transition: ' + time + 'ms linear;';
                if (!this.data.noPhoto) {
                    this.$refs.dislike.style.opacity = 0;
                    this.$refs.like.style.opacity = 0;
                    this.$parent.$refs.dislike.className = 'meet_pass';
                    this.$parent.$refs.like.className = 'meet_like';
                }
            }
            this.style1 = style;

        },

        openDialogSlider() {
            if (this.data.picture) {
                this.$emit('update:showDialogSlider', true);
            }
        },

        uploadPhoto(e) {
            let tthis = this,
                reader = new FileReader();
            if (e.target.files[0]) {
                if (e.target.files[0].size >= 10280000) {
                    tthis.$parent.dialogData = {
                        position: 'top',
                        type: 'error',
                        content: {
                            info: tthis.language.uploadPhoto_note_maxSize
                        }
                    };
                    return;
                } else {
                    reader.readAsDataURL(e.target.files[0]);
                    reader.onload = function(e) {
                        tthis.uploadImg = this.result;
                        //get width&height
                        let img = new Image();
                        img.src = tthis.uploadImg;
                        img.onload = function() {
                            tthis.width = img.naturalWidth;
                            tthis.height = img.naturalHeight;
                        };
                    }

                    tthis.$parent.loading = true;
                    let obj = {},
                        data = new FormData();
                    data.append('file', e.target.files[0]);
                    data.append('album_type', -1);
                    obj.data = data;
                    obj.photoType = 'public';
                    obj.callback = function(response) {
                        console.log('callback', response);
                        if (response.status_code == 5) {
                            console.log(response.msg);
                            tthis.$parent.dialogData = {
                                position: 'top',
                                type: 'error',
                                content: {
                                    info: response.msg,
                                }
                            };
                        } else {
                            tthis.$parent.noPhoto = false;
                            tthis.$parent.getUserList();
                        }
                    };
                    obj.complete = function() {
                        tthis.$parent.loading = false;
                    }
                    e.target.value = '';
                    tthis.$store.dispatch('user_uploadPhoto', obj);
                }
            }
        },




    }
}

</script>
<style scoped>
.item {
    max-width: 480px;
    max-height: 500px;
    position: absolute;
    text-align: center;
    border: 1px solid #e6e6e6;
    background: #fff;
    padding: 0;
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 30px 26px 110px 26px;
    border-radius: 5px;
    opacity: 0;
    overflow: hidden;
    z-index: 9;
    outline: 1px solid transparent;
    -webkit-backface-visibility: hidden;
}

@media screen and (orientation:landscape) {
    .item {
        min-height: 288px;
    }
}

@media screen and (min-width: 480px) {
    .item {
        margin-left: auto;
        margin-right: auto;
    }
}

.item .photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100% - 90px);
    left: 0;
    top: 0;
}

.item .photoNum {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 3px;
    height: 22px;
    line-height: 22px;
    color: #fff;
    font-size: 15px;
    background: rgba(0, 0, 0, .5) url(../assets/ico_photo_letsmeet.png) 4px 4px no-repeat;
    background-size: auto 12px;
    padding: 0 8px 0 22px;
}

.item .likeYou {
    position: absolute;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, .7);
    font-size: 17px;
    bottom: 0;
    left: 0;
}

.item .likeYou span {
    padding: 10px 0 10px 20px;
    margin: 0 8px 0 0;
    background: url(../assets/ico_heart_2.png) center no-repeat;
    background-size: 20px auto;
}

.item .info {
    padding: 8px 10px 0 10px;
    height: 90px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    text-align: left;
}

.item .info .username {
    font-size: 17px;
    color: #1e1e1e;
    height: 25px;
    line-height: 25px;
}

.item .info .dec {
    font-size: 14px;
    color: #1e1e1e;
    height: 21px;
    line-height: 21px;
    margin: 2px 0 3px 0;
}

.item .info .labelbox {
    height: 24px;
    overflow: hidden;
}

.item .info .username,
.item .info .dec {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.item .info .label {
    font-size: 12px;
    color: #fff;
    border-radius: 3px;
    background-color: #68c2fb;
    padding: 2px 5px;
    margin: 0 0 0 0;
}

.item .info .label:first-child {
    background-color: #fbce60;
}

.item .info .more {
    margin: 0 0 0 10px;
    background: url(../assets/dot_more.png) center no-repeat;
    padding: 0 0 0 15px;
    background-size: 15px auto;
}

.item .noPhoto {
    position: relative;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.item .noPhoto .note {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
    color: #8d9498;
    text-align: left;
}

.item .noPhoto .upPhotoBox {
    position: absolute;
    top: 36%;
    left: 0;
    width: 100%;
    margin-top: -62px;
    color: #1e1e1e;
}

.item .noPhoto .upPhotoBox p {
    padding-top: 16px;
    font-size: 15px;
}

.item .noPhoto .upPhotoBox input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}

.item .noPhoto .ico_add_photo {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 74px;
}

.item .ico_meet_pass,
.item .ico_meet_like {
    height: 67px;
    width: 67px;
    display: block;
    background-repeat: no-repeat;
    background-size: 133px auto;
    background-image: url(../assets/ico_letsmeet_rep.png);
    position: absolute;
    top: 10px;
    z-index: 2;
    opacity: 0;
}

.item .ico_meet_pass {
    background-position: -67px 0;
    right: 10px;
}

.item .ico_meet_like {
    background-position: -67px -67px;
    left: 10px;
}

.item .img {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

</style>
